<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>脸云 - 签到系统</title>
		<link rel="stylesheet" href="../css/style.default.css" type="text/css" />
		<script type="text/javascript" src="../js/plugins/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.cookie.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.uniform.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.validate.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.tagsinput.min.js"></script>
		<script type="text/javascript" src="../js/plugins/charCount.js"></script>
		<script type="text/javascript" src="../js/plugins/ui.spinner.min.js"></script>
		<script type="text/javascript" src="../js/plugins/chosen.jquery.min.js"></script>
		<script type="text/javascript" src="../js/custom/general.js"></script>
		<script type="text/javascript" src="../js/custom/forms.js"></script>
		<script src="../js/baseServerLink.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/FileSaver.js" type="text/javascript" charset="utf-8"></script>

		<!--[if IE 9]>
    <link rel="stylesheet" media="screen" href="css/style.ie9.css"/>
<![endif]-->
		<!--[if IE 8]>
    <link rel="stylesheet" media="screen" href="css/style.ie8.css"/>
<![endif]-->
		<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

		<!-- 圆角绿色小按钮！ -->
		<style type="text/css">
			.my_green_button {
				background-color: #95f04b;
				border: 0;
				border-radius: 20px;
				-moz-border-radius: 20px;
				/* 老的 Firefox */
				font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
				font-weight: bold;
				color: #5c8f30;
				border: 1px solid #6eac3a;
			}

			.my_green_button:hover {
				background-color: #92e747;
			}
		</style>

		<script type="text/javascript">
		
			var list_obj;
		
			function addLine(l1, l2, l3, l4, l5, l6, trclassname, tbodyid) {
				/*
				<tr>
					<td> 李四 </td>
					<td>789@qq.com</td>
					<td>8</td>
					<td>9</td>
					<td><a href="#" class="btn btn2 btn_archive"><span>操作</span></a></td>
				</tr>
				*/
				//展示信息的行
				$tr = jQuery("<tr class=\"" + trclassname + "\"></tr>");
				$tr.append(jQuery("<td>" + l1 + "</td>"));
				$tr.append(jQuery("<td>" + l2 + "</td>"));
				$tr.append(jQuery("<td>" + l3 + "</td>"));






				$tr.append(jQuery("<td>" + l4 + "</td>"));
				$tr.append(jQuery("<td class=\"varcio\" style='display:none'>" + l5 + "</td>"));
				if (l5 == 'null') {
					l5 = '未签退';
				}
				$tr.append(jQuery("<td>" + l6 + "</td>"));




				jQuery("#" + tbodyid).append($tr);

				//jQuery("#my_tbody").append($tr);
			}
			function calcAllPage(allnum, perpage) {
				return Math.ceil(allnum / perpage);
			}
			
			function getPathOfPage(){
				/////////////JS获取项目名//////////////
				//获取当前网址，如：
				var curWwwPath=window.document.location.href;
				
				//获取主机地址之后的目录如：/Tmall/index.jsp
				var pathName=window.document.location.pathname;
				var pos=curWwwPath.indexOf(pathName);
				
				//获取主机地址，如：//localhost:8080
				var localhostPaht=curWwwPath.substring(0,pos);
				
				//获取带"/"的项目名，如：/Tmall
				var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
				
				// "http://localhost:8080/QM/loginci.html?d=1638322099989" -> projectName: "/QM"
				
				/////////////////////////////////////
				return localhostPaht + projectName;
			}
			
			//获取全部数据
			function getAllvCiciNum(){
				jQuery.ajax({
					//url:"http://localhost:8080/QM/VCiciServlet"
					url:getPathOfPage() + "/VCiciServlet",
					data:{
						'mode':43
					},
					success:function(message){
						console.log(message)
						eval("message="+message);
						jQuery("#allnum").text(""+message[0]);
						jQuery("#allpage").text(calcAllPage(message[0], jQuery("#perpage").val()))
						jQuery("#id_user_num2").text("共查询到 "+message[0]+" 条记录")
					}
				});
			}


			//为所有签到信息查询
			//ajaxmode 41:所有学生；42 分页查询
			
			
			function load_all_users(ajaxmode, vartrclassname, tbodyid, lentextid, datetextid) {
				//////////////////////////////////////debug//////////////////////////////////
				console.log(ajaxmode)
				//////////////////////////////////////debug//////////////////////////////////
				$vartr = jQuery("." + vartrclassname);
				for (var i = 0; i < $vartr.length; i++) {
					$vartr.remove();
				}
				console.log("开始查询");
				jQuery.ajax({
					url: '../VCiciServlet',
					data: {
						'mode': "" + ajaxmode,
						'page':jQuery("#nowpage").val(),
						'perpage':jQuery("#perpage").val()
					},

					success: function(message) {
						console.log(message);
						// alert(message);
						if (message[0] != '[') {
							alert("你或许没有一个有效的登录！");
							window.location.href =  "../index.jsp";
						} else {
							eval("message=" + message);
							if(ajaxmode == 42){
								list_obj = message;
							}
							jQuery("#" + lentextid).text("共查询到 " + message.length + " 条记录");
							var d = new Date();
							jQuery('#' + datetextid).text("" + d);

							for (line in message) {
								my_line = message[line];
								addLine(
									my_line['sid'],
									my_line['ciname'],
									my_line['labname'],
									my_line['ciin'].split('.')[0],
									my_line['ciout'].split('.')[0],
									my_line['ciinfo'],
									vartrclassname,
									tbodyid
								);
							}
							//检查复选框状态
							jQuery("#check-out").change();
						}
					},
					error: function(message) {
						console.log(message)
					}
				})
			}
			
			
			function queryStudent(){
				//function load_all_users(ajaxmode, vartrclassname, tbodyid, lentextid, datetextid) {
				console.log("加载内容！");
				if(eval(jQuery('#nowpage').val()) > eval(jQuery("#allpage").text())){
					jQuery('#nowpage').val(jQuery("#allpage").text());
				}
				if(eval(jQuery('#nowpage').val()) < 1){
					jQuery('#nowpage').val("1")
				}
				
				load_all_users(42, "vartr2", "my_tbody2", "id_user_num2", "reload_date2");
			}
			jQuery(function() {
				
				// load_all_users();
				//删掉表中之前的信息
				$vartr = jQuery(".vartr");
				for (var i = 0; i < $vartr.length; i++) {
					$vartr.remove();
				}
				//######################## 分页查询的初始化-开始 ########################*/
				jQuery("#nowpage").val(1);
				getAllvCiciNum();
				
				//上一页
				jQuery("#bt_pre").click(function() {
					if (eval(jQuery("#nowpage").val()) <= 1) {
						jQuery("#nowpage").val(1);
						alert("已经是第一页！");
					} else {
						jQuery("#nowpage").val(jQuery("#nowpage").val() - 1);
						queryStudent();
					}
				});
				
				
				
				//下一页
				console.log(eval(jQuery("#nowpage").val()));
				console.log(eval(jQuery("#nowpage").val()));
				
				jQuery("#bt_next").click(function() {
					console.log(jQuery("#nowpage").val());
					console.log(jQuery("#allpage").text())
					if (eval(jQuery("#nowpage").val()) >= eval(jQuery("#allpage").text())) {
						jQuery("#nowpage").val(jQuery("#allpage").text());
						alert("已经是最后页！");
					} else {
						jQuery("#nowpage").val(eval(jQuery("#nowpage").val()) + 1);
						queryStudent();
					}
				
				});
				
				jQuery("#perpage").change(function(){
					getAllvCiciNum();
					
					if(eval(jQuery('#nowpage').val()) > eval(jQuery("#allpage").text())){
						jQuery('#nowpage').val(jQuery("#allpage").text());
					}
					if(eval(jQuery('#nowpage').val()) < 1){
						jQuery('#nowpage').val("1")
					}
					
					queryStudent();
				});
				queryStudent();
				
				jQuery("#jumpto").click(queryStudent);
				//######################## 分页查询的初始化-结束 ########################*/
				
				//复选框信息
				
				function check_out_event(){

					if(jQuery("#check-out").is(":checked") == true){
						var $varcio = jQuery(".varcio");
						for(var i = 0; i < $varcio.length; i++){
							jQuery($varcio[i]).show();
						}
					}else{
						var $varcio = jQuery(".varcio");
						for(var i = 0; i < $varcio.length; i++){
							jQuery($varcio[i]).hide();
						}
					}
				}
				
				jQuery("#check-out").change(check_out_event);
				check_out_event();
			});
		</script>

	</head>

	<body class="withvernav">

		<div class="bodywrapper">
			<div id="mytop">
				
			</div>
			<script type="text/javascript">
				jQuery(function(){
					// jQuery("#mytop").append(jQuery('<iframe id="no_download" style="background-color: #485b79;" width="100%" height="160px"></iframe>'));
					// jQuery("#no_download").attr("src", "top.jsp");
					jQuery("#mytop").load("top.jsp");
				})
			</script>
			<!--header-->

			<div class="vernav2 iconmenu">
				<ul>
					<li><a href="#formsub" class="editor">帮助手册</a>
						<!-- <span class="arrow"></span>
						<ul id="formsub">
							<li class="current"><a href="forms.html">系统概览</a></li>
						</ul> -->
					</li>

				</ul>
				<a class="togglemenu"> </a>
				<br /><br />
			</div>
			<!--leftmenu-->

			<div class="centercontent">

				<div class="pageheader">
					<h1 class="pagetitle">签到记录表</h1>
					<span class="pagedesc">Table of Check-in Record</span>

					<ul class="hornav">
						<li class="current"><a id="tag_1" href="#preview_system">分页查询所有签到信息</a></li>
						<li class=""><a id="tag_2" href="#preview_dev">所有签到信息</a></li>


					</ul>

				</div>
				
				<script>
				//修复切换标签的bug
				jQuery("#tag_1").click(function(){jQuery("#preview_dev").hide()})
				</script>
				<!--pageheader-->
				<div id="contentwrapper" class="contentwrapper">
					<!-- #################### 页面1开始 ####################-->
					<div id="preview_system" class="subcontent">
						
						
						<a href="#" class="btn btn_blue btn_flag"><span id="id_user_num2">共查询到 条记录</span></a>

						<a href="javascript:queryStudent();"
							class="btn btn2 btn_search"><span>重新查询</span></a>
						<br />
						<span>每页：
							<select id="perpage">
								<option value="1">1【测试】</option>
								<option value="2">2【测试】</option>
								<option value="3">3</option>
								<option value="5" selected>5</option>
								<option value="10">10</option>
								<option value="50">50</option>
							</select>
							项</span>，共 <span id="allnum">-1</span>项；
						第 <input id="nowpage" value="-1" style="width:30px;" /> 页(<button id="jumpto">跳转</button>)，共
						<span id="allpage">-1</span>页
						<button id="bt_pre">上一页</button>
						<button id="bt_next">下一页</button>
						<br />
						（此表数据最后一次刷新于：
						<span id="reload_date2">
							-
						</span>
						）
						<input type="checkbox" id="check-out" />check-out
						<br />
						
						<table cellpadding="0" cellspacing="0" border="0" class="stdtable" style="text-align: center;">
							<!--  <colgroup>
								<col class="con0" />
								<col class="con1" />
								<col class="con0" />
								<col class="con1" />
								<col class="con0" />
							</colgroup>-->
							<thead>
								<tr>
									<th class="head0" style="text-align: center;">学号</th>
									<th class="head1" style="text-align: center;">姓名</th>
									<th class="head1" style="text-align: center;">实验室</th>
									<th class="head1" style="text-align: center;">签到时间</th>
									<th class="head1 varcio" style="text-align: center;">签退时间</th>
									<th class="head1" style="text-align: center;">签到理由</th>
								</tr>
							</thead>
							<tbody id="my_tbody2">
								<tr class="vartr2">
									<td style="text-align: center;"> 张三 </td>
									<td>123456@qq.com</td>
									<td>2</td>
									<td>8</td>
									<td><a href="#" class="btn btn2 btn_archive"><span>操作</span></a></td>
								</tr>

								<tr class="vartr2">
									<td style="text-align: center;"> 李四 </td>
									<td>789@qq.com</td>
									<td>8</td>
									<td>9</td>
									<td><a href="#" class="btn btn2 btn_archive"><span>操作</span></a></td>
								</tr>
							</tbody>
						</table>
						<div id="" style=" text-align: right;">
							<span><a id="save_as_file" class="btn btn_archive" style="text-align: left;"><span>将现在显示的内容保存为文件</span></a></span>
						</div>
						<div id="myhide" style="display: none;">
							<input type="file" id="the_dir_of_file" webkitdirectory directory style="display: none;"/>
						</div>
						
						
						<script type="text/javascript">
							//保存为文件
							jQuery(function(){
								jQuery("#save_as_file").click(function(){
									var d = new Date();
									console.log(list_obj);
									
									
									var my_save_file_name = "签到记录表_save_"+d.getTime()+".csv";
									
									var my_save_str = "学号, 姓名, 实验室名, 签到时间, 签退时间, 实验内容\n";
									for(var i = 0; i < list_obj.length;i++){
										var a_line =""+ list_obj[i]['sid'] + ","+
										list_obj[i]['ciname'] + ","+
										list_obj[i]['labname'] + ","+
										list_obj[i]['ciin'].split('.')[0] + ","+
										list_obj[i]['ciout'].split('.')[0] + ","+
										list_obj[i]['ciinfo']+"\n";
										my_save_str = my_save_str + a_line;
									}
									console.log(my_save_str);
									 var file = new File([my_save_str], my_save_file_name, { type: "text/plain;charset=utf-8" })
									
									saveAs(file);
									// var d = new Date();
									
									// var my_save_file_name = "listfile"+d.getTime()+".csv";
									
									
									//  var downloadFile = function(content) {
									//   var file = new File([content], "标题.txt", { type: "text/plain;charset=utf-8" })
									//   saveAs(file);
									// }
									// downloadFile("文件内容");
								})
							})
						</script>

					</div>
				</div>
				
				<!-- #################### 页面1结束 ####################-->
				<!-- #################### 帮助手册 - 此页面虽在此处没有任何用处，但仍保留，以备后用 ####################-->
				<div id="preview_dev" class="subcontent" style="display: none">

					<div class="contenttitle2">
						你需要点击"查询"，查询才会进行
					</div>
					<br />
					<br />
					<a href="#" class="btn btn_blue btn_flag"><span id="id_user_num">共查询到 条记录</span></a>

					<a href="javascript:load_all_users(41, 'vartr', 'my_tbody','id_user_num' , 'reload_date');"
						class="btn btn2 btn_search"><span>查询</span></a>
					<br />
					<br />
					（此表数据最后一次刷新于：
					<span id="reload_date">
						-
					</span>
					）

					<br />
					<table cellpadding="0" cellspacing="0" border="0" class="stdtable" style="text-align: center;">
						<colgroup>
							<col class="con0" />
							<col class="con1" />
							<col class="con0" />
							<col class="con1" />
							<col class="con0" />
						</colgroup>
						<thead>
							<tr>
								<th class="head0" style="text-align: center;">学号</th>
								<th class="head1" style="text-align: center;">姓名</th>
								<th class="head1" style="text-align: center;">实验室</th>
								<th class="head1" style="text-align: center;">签到时间</th>
								<th class="head1" style="text-align: center;">签退时间</th>
								<th class="head1" style="text-align: center;">签到理由</th>
							</tr>
						</thead>
						<tbody id="my_tbody">
							<tr class="vartr">
								<td style="text-align: center;"> 张三 </td>
								<td>123456@qq.com</td>
								<td>2</td>
								<td>8</td>
								<td><a href="#" class="btn btn2 btn_archive"><span>操作</span></a></td>
							</tr>

							<tr class="vartr">
								<td style="text-align: center;"> 李四 </td>
								<td>789@qq.com</td>
								<td>8</td>
								<td>9</td>
								<td><a href="#" class="btn btn2 btn_archive"><span>操作</span></a></td>
							</tr>
						</tbody>
					</table>

				</div>
				<!-- #################### 帮助手册结束 ####################-->
			</div>
		</div>
		<!---->
		<!--bodywrapper-->

	</body>
</html>
